<template>
  <div class="message" v-show="show">
      <div class="msgbox">
          <p>!</p>
          <span>{{msg}}</span>
      </div>
  </div>
</template>

<script>
export default {
    name:'message',
    props:{
        show:Boolean,
        msg:''
    }
}
</script>

<style lang="scss" scoped>
.message{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 5;
    position: relative;
    .msgbox{
        width: 120px;
        height: 120px;
        padding: 10px;
        border-radius: 8px;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        p{
            font-size: 24px;
            text-align: center;
        }
    }
}

</style>